<template>
<highlightjs language="JavaScript" highlightAuto top :code="code" />
</template>
<script>
export default {
  setup () {
    const code = `
    const state = reactive({
      map: ref(null),
      mapBox: ref(null)
    })

    const init = () => {
      const overviewMapControl = new control.OverviewMap({
        className: 'ol-overviewmap ol-custom-overviewmap',
        layers: [
          new Tile({
            source: new OSM({
              url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' + '?apikey=0e6fc415256d4fbb9b5166a718591d71'
            })
          })
        ],
        collapseLabel: '\u00BB',
        label: '\u00AB',
        collapsed: false
      })

      state.map = new Map({
        target: state.mapBox,
        // 添加控件
        controls: control.defaults().extend([
          overviewMapControl
        ]),
        interactions: olInteraction.defaults().extend([
          new olInteraction.DragRotateAndZoom()
        ]),
        layers: [
          new Tile({
            source: new OSM()
          })
        ],
        view: new View({
          // 地图视图
          center: [116.41400, 39.91500], // 北京坐标
          zoom: 7 // 地图缩放级别（打开页面时默认级别）
        })
      })
    }
    `
    return {
      code
    }
  }
}
</script>
